import React, { useState } from 'react'
import { Tabs, TabPane, Button, Avatar } from '@douyinfe/semi-ui';
import { IconDesktop } from '@douyinfe/semi-icons';
import TableComponents from '../../components/TableComponents';

import "../../static/css/listPageDesktop.css"
import AnchorEditPage from './AnchorEditPage';
import anchor from '../../api/anchor';
import { avatarUrl } from '../../lib/utils';

const entity = { "id": 0, "avatars": [], "avatar": "", "role_id": null, "anchor_name": "" };

const columns = [
    {
        title: '角色',
        dataIndex: 'role_name',
    },
    {
        title: '头像',
        dataIndex: 'avatar',
        render: (text, record, index) => {
            return <Avatar
                border={{ motion: true }}
                src={avatarUrl(text)}
                bottomSlot={{
                    shape: "square",
                    bgColor: '#FE2C55',
                    text: "直播中"
                }}
            >
                {record.anchor_name}
            </Avatar>;
        },
    },
    {
        title: '姓名',
        dataIndex: 'anchor_name',
    },
    {
        title: '创建时间',
        dataIndex: 'created_at',
    },
];


export default function AnchorPage() {
    const [visible, setVisible] = useState(false);
    const [data, setData] = useState(entity);
    const [refreshTable, setRefreshTable] = useState(0);

    return (
        <div style={{
            backgroundColor: 'var(--semi-color-bg-0)', padding: '10px'
        }}>
            <div>
                <Tabs
                    size='small'
                    tabBarExtraContent={
                        <Button size='small' onClick={() => {
                            setData({ ...entity })
                            setVisible(true)
                        }} >
                            添加主播
                        </Button>
                    }
                >
                    {/* <TabPane tab={<span><IconDesktop />主播概览</span>} itemKey="1" />
                    <TabPane tab={<span><IconDesktop />主播排班</span>} itemKey="2" />
                    <TabPane tab={<span><IconDesktop />上播记录</span>} itemKey="3" /> */}
                    <TabPane tab={<span><IconDesktop />主播列表</span>} itemKey="4">
                        <TableComponents
                            refreshTable={refreshTable}
                            withBtn={{
                                operation: true
                            }}
                            columns={columns}
                            saveApi={(data) => anchor.save(data)}
                            infoApi={(data) => anchor.info(data).then(({ data }) => {
                                setData(data)
                                setVisible(true)
                            })}
                            fetchApi={(data) => anchor.list(data)}
                            deleteApi={(data) => anchor.delete(data)}
                        />
                    </TabPane>
                </Tabs>
            </div>

            <AnchorEditPage
                data={data}
                visible={visible}
                setRefreshTable={() => setRefreshTable(Math.random())}
                setVisible={setVisible} />
        </div>
    )
}
